<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="static/js/qwebchannel.js"></script>
    <script type="text/javascript">
        //---Web show receive message---
        function output(message) {
            alert('output message：' + message);
            var output = document.getElementById("output");
            output.innerHTML = output.innerHTML + message + "\n";
        }

        //Web initial loading
        window.onload = function () {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                //Get Qt interact object
                var interactObj = channel.objects.interactObj;

                //Web send message to Qt
                document.getElementById("send").onclick = function () {
                    var input = document.getElementById("input");
                    if (!input.value) {
                        return;
                    }
                    output("Html send string to Python: " + input.value);

                    //Web use the interface of Qt
                    // interactObj.fun(alert);
                    interactObj.jsPostMessage(input.value);
                    input.value = "";
                }

                //Web connect the Qt signal, then Qt can call "output" function
                interactObj.pyMessage.connect(function (str) {
                    output("Html received string from Python: " + str);
                });
            });
        }

    </script>
    <style type="text/css">
        html {
            height: 100%;
            width: 100%;
        }

        #input {
            width: 650px;
            margin: 0 10px 0 0;
        }

        #send {
            width: 90px;
            margin: 0;
        }

        #output {
            width: 770px;
            height: 550px;
        }
    </style>
</head>
<body>
<textarea id="output" readonly="readonly"></textarea><br/>
<input id="input"/>
<input type="submit" id="send" value="Send" οnclick="javascript:click();"/>
</body>
</html>